<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>❤</title>
    <!-- <link rel="stylesheet" href="css/index.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0
        }

        body {
            height: 3000px;
            perspective: 500px;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-color: #ffc5b3;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            background-image: radial-gradient(#ffeded, #ffc7c7)
        }

        .textCon {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: 700px;
            height: 60px;
            margin: 50px auto
        }

        .text {
            font-size: 48px
        }

        .heart {
            width: 80px;
            height: 80px;
            background-color: #cc2a5d;
            margin: 200px auto;
            position: relative;
            transform: rotate(45deg);
            animation: heart 1s ease-in infinite
        }

        .heart::before,
        .heart::after {
            content: '';
            width: 100%;
            height: 100%;
            background-color: #cc2a5d;
            border-radius: 50%
        }

        .heart::before {
            position: absolute;
            top: 0;
            left: 0;
            transform: translateX(-50%)
        }

        .heart::after {
            position: absolute;
            top: 0;
            left: 0;
            transform: translateY(-50%)
        }

        @keyframes heart {
            0% {
                transform: scale(.8) rotate(45deg);
                opacity: .8
            }

            50% {
                transform: scale(1) rotate(45deg);
                opacity: 1
            }

            100% {
                transform: scale(.8) rotate(45deg);
                opacity: .8
            }
        }

        .textCon .item {
            position: absolute;
            opacity: 0;
            background-color: #cc2a5d;
            transform: rotate(45deg);
            animation: hearts 3s ease-in infinite
        }

        .textCon .item::before,
        .textCon .item::after {
            content: '';
            width: 100%;
            height: 100%;
            background-color: #cc2a5d;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%
        }

        .textCon .item::before {
            transform: translateX(-50%)
        }

        .textCon .item::after {
            transform: translateY(-50%)
        }

        @keyframes hearts {
            0% {
                opacity: 0;
                transform: translateY(0%) rotate(45deg)
            }

            20% {
                opacity: .8;
                transform: translateY(-20%) rotate(45deg)
            }

            100% {
                opacity: 0;
                transform: translateY(-1000%) rotate(45deg)
            }
        }

        .days-label {
            font-size: 30px
        }

        .seconds {
            margin-top: 10px;
            font-size: 32px;
            font-family: monda_bo, Georgia, sans-serif;
            width: auto;
            text-align: center
        }

        .seconds-label {
            margin-top: 32px;
            font-size: 32px;
            font-family: monda_no, Georgia, sans-serif;
            width: auto;
            text-align: center
        }

        .container {
            position: absolute
        }

        .days {
            font-size: 40px;
            width: auto;
            text-align: center
        }

        .words {
            font-size: 50px;
            font-family: regular, cursive;
            width: auto;
            text-align: center
        }

        .box {
            margin-bottom: auto;
            text-align: center;
            height: .666667rem;
        }

        ul {
            list-style: none;
            width: 300px;
            height: 200px;
            /* border: 4px solid #0a0; */
            margin: 300px auto;
            /* transform: rotate3d(1, 0, 0, -45deg); */
            transform-style: preserve-3d;
            animation: move21 10s infinite linear;
        }

        ul:hover {
            animation-play-state: paused;
        }

        li {
            position: absolute;
        }

        li:nth-child(1) {
            transform: translateZ(350px);
        }

        li:nth-child(2) {
            transform: rotateY(60deg) translateZ(350px);
        }

        li:nth-child(3) {
            transform: rotateY(120deg) translateZ(350px);
        }

        li:nth-child(4) {
            transform: rotateY(180deg) translateZ(350px);
        }

        li:nth-child(5) {
            transform: rotateY(240deg) translateZ(350px);
        }

        li:nth-child(6) {
            transform: rotateY(300deg) translateZ(350px);
        }

        img {
            display: block;
            width: 300px;
            height: 200px;
            opacity: 0.5;
        }

        @keyframes move21 {
            to {
                transform: rotateY(360deg);
                /* rotate3d(1, 0, 0, -45deg)  */
                /* perspective: 1000px; */
            }
        }
    </style>
</head>

<body>
    <!-- <a href="./二倍图.html">跳转到二倍图</a> -->
    <div class="textCon">
        <div class="words">今天是认识你的第</div>
        <div class="days">
            <span class="days-number">0</span>
            <span class="days-label">天</span>
        </div>
        <div class="seconds">15 hours 24 minutes 30 seconds</div>
    </div>
    <div class="heart"></div>
    <!-- <script src="js/index.js"></script>
    <script src="js/love.js"></script> -->
    <footer>
        <div class="box">
            <ul>
                <li><img src="./images/laopo.jpg" alt=""></li>
                <li><img src="./images/laopo.jpg" alt=""></li>
                <li><img src="./images/laopo.jpg" alt=""></li>
                <li><img src="./images/laopo.jpg" alt=""></li>
                <li><img src="./images/laopo.jpg" alt=""></li>
                <li><img src="./images/laopo.jpg" alt=""></li>
            </ul>
        </div>
    </footer>
    <script>
        var arr = "2018-11-24 09:00:00".split(/[- :]/);
        var box = document.getElementsByClassName('textCon')[0];

        function init() {
            var width = box.offsetWidth;
            var count = parseInt(width / 50 * 5);
            for (var i = 0; i < count; i++) {
                var size = parseInt(ran(60, 120) / 10);
                var ele = document.createElement('div');
                ele.classList.add('item');
                ele.style.width = size + 'px';
                ele.style.height = size + 'px';
                ele.style.left = ran(0, 95) + '%';
                ele.style.top = ran(20, 80) + '%';
                ele.style.animationDelay = ran(0, 30) / 10 + 's';
                box.appendChild(ele);
            }
        }

        function ran(min, max) {
            min = parseInt(min);
            max = parseInt(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function timer_start() {
            var start_time = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);
            var duration = parseInt(new Date() - start_time) / 1000;
            var seconds = parseInt(duration % 60);
            if (seconds < 10)
                seconds = "0" + seconds;
            duration = parseInt(duration / 60);
            var minutes = duration % 60;
            if (minutes < 10)
                minutes = "0" + minutes;
            duration = parseInt(duration / 60);
            var hours = duration % 24;
            if (hours < 10)
                hours = "0" + hours;
            duration = parseInt(duration / 24);
            var days = duration;
            document.getElementsByClassName('days-number')[0].innerHTML = ("" + days);
            document.getElementsByClassName('seconds')[0].innerHTML = (hours + "小时" + minutes + "分" + seconds + "秒");
        }
        window.setInterval(timer_start, 1000);
        timer_start();
        init();
        ! function (e, t, a) {
            function n() { c(".love{width: 20px;height: 20px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.love:after,.love:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.love:after{top: -10px;}.love:before{left: -10px;}"), o(), r() }

            function r() {
                for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
                requestAnimationFrame(r)
            }

            function o() {
                var t = "function" == typeof e.onclick && e.onclick;
                e.onclick = function (e) { t && t(), i(e) }
            }

            function i(e) {
                var a = t.createElement("div");
                a.className = "love", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a)
            }

            function c(e) {
                var a = t.createElement("style");
                a.type = "text/css";
                try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e }
                t.getElementsByTagName("head")[0].appendChild(a)
            }

            function s() { return "#cc2a5d" }
            var d = [];
            e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n()
        }(window, document);
    </script>
</body>

</html>